{%extends "base.html"%}
{%block onload%}{{ block.super }}update_score_board();{%endblock%}
{%block title%}Score Board{%endblock%}

{%block update_friends%}
{{ block.super }}
  if (board == 'friends') {
    update_score_board()
  }
{%endblock%}

{%block body%}
{{ block.super }}
<script>
var player_rank = null;

var update_socket = null;
function update_score_board(new_board) {
  if (new_board == true) {
    player_rank = null;
  }
  var args = ('game=' + document.getElementById('game').value +
              '&cat=' + document.getElementById('cat').value +
              '&board=' + document.getElementById('board').value)
  if (!update_socket) {
    args += "&new_token=1"
  }
  dao('score', 'list', args, finish_update_score_board, alert);
}

function clear_score_board() {
  var score_board = document.getElementById('score_board');
  while (score_board.rows.length > 1) {
    score_board.deleteRow(1)
  }
  return score_board
}

function finish_update_score_board(txt) {
  var score_board = clear_score_board()
  scores = txt.split(',');

  data = scores[0].split('|');
  document.getElementById('query').innerHTML = "<font color=black>" + data[1] + "</font>";
  // Openning update channel
  if (!update_socket) {
    var channel = new goog.appengine.Channel(data[0]);
    update_socket = channel.open();
    update_socket.onmessage = update_score_board;
    update_socket.onerror = alert;
  }

  if (player_rank == null) {
    // Updating player rank
    player_rank = Array();
    for (var i = scores.length - 1; i >= 1; --i) {
      if (scores[i]) {
        data = scores[i].split('|');
        player_rank[data[1]] = parseInt(data[0]);
      }
    }
  }

  for (var i = scores.length - 1; i >= 1; --i) {
    if (scores[i]) {
      row = score_board.insertRow(1);
      data = scores[i].split('|');
      row.innerHTML = '<td align="center">' + data[0] +
          '</td><td align="center">' + data[2] +
          '</td><td align="center">' + data[3] + '</td>';
      rank = parseInt(data[0]);
      prev_rank = player_rank[data[1]];
      if (prev_rank && rank != prev_rank) {
        if (rank > prev_rank) {
          row.innerHTML += '<td>&darr;</td>';
        } else {
          row.innerHTML += '<td>&uarr;</td>';
        }
      } else {
        row.innerHTML += '<td>&nbsp;</td>';
      }
    }
  }
  if (score_board.rows.length <= 1) {
    score_board.insertRow(1).innerHTML = '<td colspan=4>None</td>';
  }
}
</script>
<table width="100%"><tr><td>Player: {{alias}}</td><td id=lastMsg align="right"></td></tr></table>
<center>
<table>
  <tr>
    <td>Games:</td>
    <td><select id=game onchange="update_score_board(true);">
      <option>Score Attack</option>
    </select></td>
    <td>Category:</td>
    <td><select id=cat onchange="update_score_board(true);">
      <option value='high_score'>High Score</option>
      <option value='best_time'>Time Attack</option>
    </select></td>
    <td>Type:</td>
    <td><select id=board onchange="update_score_board(true);">
      <option value='all'>All Time</option>
      <option value='friends'>Friends</option>
      <option value='today'>Today</option>
    </select></td>
  </tr>
</table>

<h2>Score Board:</h2>
<table id=score_board class="round">
  <tr><th>Rank</th><th>Player</th><th>Score</th></tr>
  <tr><td colspan=3 align="center">Loading...</td></tr>
</table>
<div id="query"></div>
</center>
{%endblock%}
